<template>
  <el-main>
    <!-- 新增按钮 -->
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow" v-if="hasPermission('sys:menu:add')">
      新增
    </el-button>
    <!-- 数据表格 -->
    <el-table
    style="width:100%;margin-top: 10px"
    :height="tableHeight"
    :data="menuList"
    row-key="id"
    default-expand-all
    :tree-props="{children: 'children'}"
    :border="true"
    stripe
    >
    <el-table-column prop="label" label="菜单名称"></el-table-column>
    <el-table-column prop="type" label="菜单类型" align="center">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.type=='0'" size="normal">目录</el-tag>
        <el-tag type="success" v-else-if="scope.row.type=='1'" size="normal">菜单</el-tag>
        <el-tag type="warning" v-else-if="scope.row.type=='2'" size="normal">按钮</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="icon" label="图标" align="center">
      <template slot-scope="scope">
        <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')"></i>
        <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="路由名称"></el-table-column>
    <el-table-column prop="path" label="路由地址"></el-table-column>
    <el-table-column prop="url" label="路由路径"></el-table-column>
    <el-table-column label="操作" align="center" width="200">
      <template slot-scope="scope">
        <el-button type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="editMenu(scope.row)"
          v-if="hasPermission('sys:menu:edit')"
        >
          编辑
        </el-button>
        <el-button type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="deleteMenu(scope.row)"
          v-if="hasPermission('sys:menu:delete')"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 新增或编辑弹框 -->
    <system-dialog :title="menuDialog.title"
      :width="menuDialog.width"
      :height="menuDialog.height"
      :visible="menuDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form :model="menu"
          ref="menuForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="菜单类型" prop="type" >
                <el-radio-group v-model="menu.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <el-radio :label="2">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="所属菜单" prop="parentName" size="small" >
            <el-input
              @click.native="selectParentMenu"
              v-model="menu.parentName"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" prop="label" size="small" >
            <el-input v-model="menu.label"></el-input>
          </el-form-item>
          <el-form-item label="菜单图标" size="small" > 
            <my-icon @selection="setIcon" ref="child"></my-icon>
          </el-form-item>
          <el-form-item label="路由名称" prop="name" v-if="menu.type == 1" size="small" > 
            <el-input v-model="menu.name"></el-input>
          </el-form-item>
          <el-form-item label="路由地址" prop="path" v-if="menu.type != 2" size="small" > 
            <el-input v-model="menu.path"></el-input>
          </el-form-item>
          <el-form-item label="组件路径" prop="url" v-if="menu.type == 1" size="small" > 
            <el-input v-model="menu.url"></el-input>
          </el-form-item>
          <el-form-item label="权限字段" prop="code" size="small" > 
            <el-input v-model="menu.code"></el-input>
          </el-form-item>
          <el-form-item label="菜单序号" size="small"> 
            <el-input v-model="menu.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!-- 选择所属菜单弹框 -->
     <system-dialog 
      :title="parentDialog.title"
      :width="parentDialog.width"
      :height="parentDialog.height"
      :visible="parentDialog.visible"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm"
     >
      <div slot="content">
        <el-tree 
        style="font-size: 14px;"
        ref="parentTree"
        :data="parentMenuList"
        node-key="id"
        :props="defaultProps"
        empty-text="暂无数据"
        :show-checkbox="false"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        >
          <div class="customer-tree-node" slot-scope="{node,data}">
            <!-- 长度为0说明没有下级节点 -->
            <span v-if="data.children.length === 0">
              <i class="el-icon-document" style="color: #8c8c8c; font-size: 18px;" />
            </span>
            <span v-else @click.stop="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s"/>
              <svg-icon v-else icon-class="sub-s"/>
            </span>
            <span style="margin-left: 3px;">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
     </system-dialog>
  </el-main>
</template>

<script>
import menuApi from '@/api/menu';
import SystemDialog from '@/components/system/SystemDialog.vue';
// 引入自定义图标组件
import MyIcon from '@/components/system/MyIcon.vue';

export default {
  name: 'MenuList',
  components:{
    SystemDialog,
    MyIcon,
  },
  data(){
    return{
      menuList:[],//菜单列表
      tableHeight:0,//表格高度
      //  新增或编辑窗口属性
      menuDialog:{
        title:'',
        visible:false,
        width:630,
        height:270,
      },
      //菜单属性
      menu:{
        id:'',
        type:'',
        parentId:'',
        parentName:'',
        label:'',
        icon:'',
        name:'',
        path:'',
        url:'',
        code:'',
        orderNum:'',
      },
      //表单验证规则
      rules:{
        type:[{required:true,trigger:'change',message:'请选择菜单类型'}],
        parentName:[{required:true,trigger:'change',message:'请选择所属菜单'}],
        label:[{required:true,trigger:'blur',message:'请输入菜单名称'}],
        name:[{required:true,trigger:'blur',message:'请输入路由名称'}],
        path:[{required:true,trigger:'blur',message:'请输入路由路径'}],
        url:[{required:true,trigger:'blur',message:'请输入组件路径'}],
        code:[{required:true,trigger:'blur',message:'请输入权限字段'}],
      },
      //上级菜单弹框属性
      parentDialog:{
        title:'选择所属菜单',
        width:280,
        height:450,
        visible:false,
      },
      //树属性定义
      defaultProps:{
        children:'children',
        label:'label'
      },
      parentMenuList:[], //所属菜单列表数据
    };
  },
  methods: {
    /**
     * 获取菜单列表
     */
    async search(){
      let res = await menuApi.getMenuList();
      if(res.success){
        this.menuList = res.data;
      }
    },
    /**
     * 打开添加窗口
     */
    openAddWindow(){
      this.$resetForm("menuForm",this.menu);//清空表单列表
      this.menuDialog.title = "新增菜单";//设置窗口标题
      this.menuDialog.visible = true;//显示添加窗口
      this.$nextTick(() => {
        this.$refs["child"].userChooseIcon = "";//清空菜单图标
      })
    },
    /**
     * 新增和编辑菜单窗口关闭事件
     */
    onClose(){
      this.menuDialog.visible = false;
    },
    /**
     * 新增和编辑菜单窗口确认事件
     */
    onConfirm(){
      this.$refs.menuForm.validate(async (valid) => {
        if (valid) { 
          let res = null;
          if(this.menu.id === ""){
            //发送添加请求
            res = await menuApi.addMenu(this.menu);
          }else{
            //发送修改请求
            res = await menuApi.updateMenu(this.menu);
          }
          //判断是否成功
          if(res.success){
            this.$message.success(res.message);
            // this.search();
            window.location.reload();
            this.menuDialog.visible = false;
          }else{
            this.$message.error(res.message);
          }
        }
      });
    },
    /*
    * 选择上级菜单
     */
    async selectParentMenu(){
      //显示窗口
      this.parentDialog.visible = true;
      let res = await menuApi.getParentMenuList();
      if(res.success){
        this.parentMenuList = res.data;
      }
    },
    onParentClose(){
      this.parentDialog.visible = false;
    },
    onParentConfirm(){
      this.parentDialog.visible = false;
    },
    /**
     * 切换图标
     */
    openBtn(data){
      data.open = !data.open;
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open;
    },
    /**
     * 绑定icon的点击事件
     */
    setIcon(icon){
      this.menu.icon = icon;
    },
    /**
     * 所属菜单节点点击事件
     */
    handleNodeClick(data){
      this.menu.parentId  = data.id;
      this.menu.parentName  = data.label;
    },
    /**
     * 编辑菜单
     */
    editMenu(row){
      //将当前要编辑的数据复制到数据域，给表单回显
      this.$objCopy(row,this.menu);
      //设置弹框属性
      this.menuDialog.title = "编辑菜单";
      this.menuDialog.visible = true;
      this.$nextTick(() => {
        //菜单图标回显
        this.$refs["child"].userChooseIcon = row.icon;
      })
    },
    /**
     * 删除菜单
     */
    async deleteMenu(row){
      //判断是否存在子菜单
      let result = await menuApi.checkPermission({id:row.id});
      //判断是否可以删除
      if(!result.success){
        //提示不能删除
        this.$message.warning(result.message);
      } else {
        //弹出确认框
        let confirm = this.$confirm("确定要删除该数据吗？");
        if(confirm){
          //发送删除请求
          let res = await menuApi.deleteById({id:row.id});
          if(res.success){
            this.$message.success(res.message);
            this.search();
          }else{
            this.$message.error(res.message);
          }
        }
      }
    },
  },
  //初始化时调用
  created(){
    //调用查询菜单列表的方法
    this.search();
  },
  mounted(){
    this.$nextTick(() =>{
      this.tableHeight = window.innerHeight - 180;
    })
  },
}
</script>

<style lang="scss" scoped">

</style>